<template>
  <div class="location">
    <div class="index-route">
      <img class="index-route-icon" src="@/assets/images/image(23).png" />
      <div class="index-route-go">
        <div class="index-route-go-title">您现在的位置：</div>
        <div class="index-route-go-home">首页</div>
        <i class="el-icon-arrow-right"></i>
        <div class="index-route-go-now">{{ $_route.name }}</div>
      </div>
    </div>
    <img class="index-img" :src="typeFilter(props.type)" />
  </div>
</template>

<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import {
  computed,
  onMounted,
  ref,
  reactive,
  toRefs,
  inject,
  defineProps,
} from "vue";
import { useRoute, useRouter } from "vue-router";
// 获取props
const props = defineProps({
  type: String,
});
//获取路由
const $_route = useRoute();
const $_router = useRouter();
onMounted(() => {
  console.log($_route.name);
});
// 根据type切换img
const typeFilter = type => {
  switch (type) {
    // 发布代理
    case "agent":
      return require("@/assets/images/image(64).png");
    // 所有产品
    case "product":
      return require("@/assets/images/image(49).png");
    // 企业大全
    case "enterprise":
      return require("@/assets/images/image(39).png");
    // 我要代理
    case "proxy":
      return require("@/assets/images/image(51).png");
    // 我要招商
    case "merchant":
      return require("@/assets/images/image(48).png");
    // OEM代加工
    case "processing":
      return require("@/assets/images/image(38).png");
    // 连锁加盟
    case "franchise":
      return require("@/assets/images/image(50).png");
    // 行业资讯
    case "industry":
      return require("@/assets/images/image(46).png");
    // 联系我们
    case "contact":
      return require("@/assets/images/image(47).png");
    // 客户好评
    case "praise":
      return require("@/assets/images/image(40).png");
    // 广告申请
    case "advertising":
      return require("@/assets/images/image(63).png");
  }
};
</script>

<style lang="scss" scoped>
.location {
  @include flex(center, flex-start);
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.index-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.index-route {
  @include flex(flex-start, center);
}
.index-route-icon {
  margin-right: 8px;
  width: 18px;
  height: 18px;
}
.index-route-go {
  @include flex(flex-start, center);
}
.index-route-go-title,
.index-route-go-home,
.index-route-go-now {
  text-align: left;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 18px;
}
</style>
